<script setup>
import {onMounted, ref, shallowReactive, shallowRef} from "vue";
import router from "../../../router";
import {updateApi} from "../../../api/student.js";
import {RULE} from "../../../const";
import MyNav from "../../../components/MyNav.vue";
import MyCascader from "../../../components/MyCascader.vue";
import MyForm from "../../../components/MyForm.vue";
import {getResponseData} from "../../../util";
import {listApi as listClazzApi} from "../../../api/clazz.js";
import {listApi as listDictApi, scmTreeApi} from "../../../api/dictionary.js";

// 获取当前员工记录
let student = JSON.parse(sessionStorage.getItem('student'));

/* ==================== 查询全部的学生关联数据 ==================== */
// 所在在陪班级下拉菜单选项
let clazzItems = ref([]);
let gradeItems = ref([]);
let scmTreeItems = ref([]);

async function listSCMTree() {
  let res = await scmTreeApi();
  let data = getResponseData(res);
  let treeJson = JSON.stringify(data)
  treeJson = treeJson.replaceAll('id', 'value').replaceAll('name', 'label')
  Object.values(JSON.parse(treeJson)).forEach(item => {
    scmTreeItems.value.push(item);
  });
}

/* ==================== 查询字典表中的所有年级 ==================== */
async function listGrade() {
  let res = await listDictApi({pid: 2});
  let grades = getResponseData(res);
  Object.values(grades).forEach(grade => {
    gradeItems.value.push({'label': grade['name'], 'value': grade['id']});
  });
}

/* ==================== 查询所有在陪班级 ==================== */
async function listClazz() {
  let res = await listClazzApi();
  let classes = getResponseData(res);
  Object.values(classes).forEach(clazz => {
    clazzItems.value.push({'label': clazz['name'], 'value': clazz['id']});
  });
}




/* ==================== 修改表单 ==================== */

// 表单项
let items = shallowRef([
  {'label': '学员姓名', 'prop': 'name', 'required': true, 'span': 12},
  {
    'label': '学校', 'prop': 'scmIds', 'type': 'cascader', options: scmTreeItems.value,
    'required': true, 'span': 12
  },
  {
    'label': '年级', 'prop': 'gradeId', 'type': 'select', optionItems: gradeItems.value,
    'required': true, 'span': 12
  },
  {
    'label': '班级', 'prop': 'clazzId', 'type': 'select', 'optionItems': clazzItems.value,
    'required': true, 'span': 12
  },
  {
    'label': '员工性别', 'prop': 'gender', 'type': 'select', 'required': true, 'span': 12, 'optionItems': [
      {'label': '女', 'value': 0},
      {'label': '男', 'value': 1},
      {'label': '保密', 'value': 2}
    ],
  },
  {'label': '电话', 'prop': 'phone', 'required': true, 'span': 12},
  {'label': '微信', 'prop': 'wechat', 'required': true, 'span': 12},
  {'label': 'QQ', 'prop': 'qq', 'required': true, 'span': 12},
  {'label': '身份证号', 'prop': 'idCard', 'required': true, 'span': 12},
  {'label': '招生销售', 'prop': 'salesmanId', 'required': true, 'span': 12},
  {'span': 12, 'hidden': true},
  {'label': '学员描述', 'prop': 'info', 'type': 'textarea'},
]);
// 表单值
let data = shallowReactive(student);
// 表单规则
let rules = {
  /*'name': RULE.REALNAME,
  'phone': RULE.PHONE,
  'emergencyContactPhone': RULE.PHONE,
  'idCard': RULE.IDCARD,
  'info': RULE.COMMON_INFO,*/
};

/* ==================== 加载函数 ==================== */
onMounted(() => {
  listClazz()
  listSCMTree()
  listGrade()
});

</script>

<template>

  <my-nav :items="[
    {'icon': 'Avatar', 'label': '班级管理', 'url': '/Student'},
    {'icon': 'User', 'label': '学员列表', 'url': '/Student'},
    {'icon': 'Plus', 'label': '修改学员'},
  ]"/>

  <el-divider/>

  <el-card class="student-insert-card" header="修改学员信息">
    <my-form type="update"
             :items="items"
             :data="data"
             :rules="rules"
             :api="updateApi"
             :fn="() => router.push('/Student')"/>
  </el-card>
</template>

<style scoped lang="scss">
.student-insert-card {
  width: 80%;
  margin: auto;
}
</style>